import { MONET_IMGS_CONTENT_PATH } from 'src/config/vis';

export function fontBuilder(params) {
  const {
    name, code, size, color: fColor,
  } = params || {};

  return {
    name: name || '文本设置',
    code: code || 'font',
    type: 'FontGroup',
    value: {
      fontSize: size || 12,
      fontFamily: 'siyuan',
      color: fColor || '#FFF',
      fontWeight: 'normal'
    },
  };
}
export function fontThemeBuilder(params) {
  const {
    name, code, size, themePath, fontWeight
  } = params || {};

  return {
    isGlobalControlled: true,
    name: name || '文本设置',
    code: code || 'font',
    type: 'FontGroup',
    value: {
      fontSize: size || 12,
      fontFamily: 'siyuan',
      color: '',
      fontWeight: fontWeight || 'normal'
    },
    themePath: themePath || {
      color: 'lightColorList[1]'
    }
  };
}

// 线样式枚举
export const lineTypeEnum = [
  { key: '__________', value: 'solid' },
  { key: '----------', value: 'dashed' },
  { key: '................', value: 'dotted' },
];
// 数据映射位置
export const visualMapPosition = [
  { key: '顶部居左', value: 'left#top' },
  { key: '顶部居中', value: 'center#top' },
  { key: '顶部居右', value: 'right#top' },
  { key: '底部居左', value: 'left#bottom' },
  { key: '底部居中', value: 'center#bottom' },
  { key: '底部居右', value: 'right#bottom' },
  { key: '左侧居中', value: 'left#middle' },
  { key: '右侧居中', value: 'right#middle' },
];
// 图例位置枚举
export const legendPositionEnum = [
  { key: '顶部居中', value: 'top#center' },
  { key: '顶部居左', value: 'top#left' },
  { key: '顶部居右', value: 'top#right' },
  { key: '底部居中', value: 'bottom#center' },
  { key: '底部居左', value: 'bottom#left' },
  { key: '底部居右', value: 'bottom#right' },
  { key: '左侧居中', value: 'left#middle' },
  { key: '左侧居上', value: 'left#top' },
  { key: '左侧居下', value: 'left#bottom' },
  { key: '右侧居中', value: 'right#middle' },
  { key: '右侧居上', value: 'right#top' },
  { key: '右侧居下', value: 'right#bottom' }
];
// 图例图标类型枚举
export const legendIconEnum = [
  { key: '圆形', value: 'circle' },
  { key: '直角矩形', value: 'rect' },
  { key: '圆角矩形', value: 'roundRect' },
  { key: '三角形', value: 'triangle' },
  { key: '菱形', value: 'diamond' },
  { key: '气球', value: 'pin' },
  { key: '箭头', value: 'arrow' },
  { key: '无', value: 'none' }
];

// 地图label位置枚举
export const LabelPositionEnum = [
  { key: '顶部', value: 'top' },
  { key: '左侧', value: 'left' },
  { key: '右侧', value: 'right' },
  { key: '底部', value: 'bottom' },
  { key: '内部', value: 'inside' },
  { key: '内部居左', value: 'insideLeft' },
  { key: '内部居右', value: 'insideRight' },
  { key: '内部居上', value: 'insideTop' },
  { key: '内部居下', value: 'insideBottom' },
  { key: '内部左上', value: 'insideTopLeft' },
  { key: '内部左下', value: 'insideBottomLeft' },
  { key: '内部右上', value: 'insideTopRight' },
  { key: '内部右下', value: 'insideBottomRight' }
];

export const isHideAxis = {
  name: '隐藏轴',
  code: 'hide',
  type: 'CheckBox',
  value: false
};

export function showAxisParams(params) {
  const { name, value } = params || {};
  return {
    name: name || '隐藏轴',
    code: 'hide',
    type: 'CheckBox',
    value: value || false
  };
}

export function seriesName(params) {
  const { name, code, value } = params || {};
  return {
    name: name || '单位(10字以内)',
    code: code || 'name',
    value: value || '',
    type: 'Input',
    max: 10
  };
}

// 轴线文本旋转设置
export const rotate = {
  name: '旋转角度',
  code: 'rotate',
  type: 'InputNumber',
  value: 0,
  min: 0,
  max: 360
};

// 轴线文本是否智能隐藏
export const interval = {
  name: '智能隐藏',
  code: 'interval',
  type: 'CheckBox',
  value: false
};

// 设置Y轴分隔段数(智能预估)
export const splitNumber = {
  name: '分隔段数(智能预估)',
  code: 'splitNumber',
  type: 'InputNumber',
  value: 5,
  min: 2,
};

// 是否显示, 默认值为false
export function isShow(boolean) {
  return {
    name: '是否显示',
    code: 'show',
    type: 'CheckBox',
    value: boolean || false
  };
}

// 线条粗细
export function lineWidth(params) {
  return {
    name: '粗细',
    code: 'width',
    value: 1,
    type: 'InputNumber',
    max: 99,
    min: 1,
    ...params
  };
}

// 线条粗细
export function lineType(params) {
  const { name, value } = params || {};
  return {
    name: name || '样式',
    code: 'type',
    value: value || 'solid',
    type: 'Select',
    enumValue: lineTypeEnum
  };
}

// 线条粗细, 默认颜色为坐标轴线的蓝色
export function color(params) {
  const {
    name, code, value, themePath
  } = params || {};
  return {
    name: name || '颜色',
    code: code || 'color',
    value: value || '',
    type: 'ColorSelector',
    themePath: themePath || 'themeColorList[5]'
  };
}

// 圆角设置, 默认值10
export function radius(params) {
  const { name, code, value } = params || {};
  return {
    name: name || '圆角设置',
    code: code || 'barRadius',
    value: value || 10,
    min: 0,
    max: 100,
    type: 'InputNumber',
    unit: 'px(像素)'
  };
}

export const pieWidth = {
  code: 'peiWidth',
  name: '圆环宽度',
  children: [
    {
      name: '内环占比 (0 ~ 65)',
      code: 'defaultWidth',
      value: 50,
      min: 0,
      max: 65,
      type: 'InputNumber',
      unit: '%(百分比)'
    }
  ]
};

export const centerPoint = {
  code: 'centerPoint',
  name: '中心点位置',
  children: [
    {
      name: '',
      code: 'topLeft',
      type: 'CenterConfig',
      value: '5500-5000',
    }
  ]
};

export const axisStyle = {
  code: 'axisStyle',
  name: '轴线设置',
  children: [
    lineWidth({ value: 1 }),
    lineType(),
    {
      isGlobalControlled: true,
      name: '颜色',
      code: 'color',
      value: '',
      type: 'ColorSelector',
      themePath: 'themeColorList[4]'
    }
  ]
};

export const barStyle = {
  code: 'barStyle',
  name: '柱图样式',
  children: [
    {
      name: '柱子宽度',
      code: 'barWidth',
      value: 30,
      min: 1,
      max: 100,
      type: 'InputNumber',
      unit: '%(百分比)'
    },
    radius(),
    {
      name: '数值文本',
      code: 'label',
      children: [
        isShow(true),
        {
          name: '字号',
          code: 'fontSize',
          value: 16,
          min: 12,
          type: 'InputNumber',
          unit: 'px(像素)'
        },
        {
          name: '单位',
          code: 'unit',
          type: 'Input',
          value: ''
        }
      ]
    },
  ]
};

export const dataZoom = {
  code: 'dataZoom',
  name: '数据滚动设置',
  children: [
    // {
    //   name: '开启数据伸缩',
    //   code: 'show',
    //   type: 'CheckBox',
    //   value: false
    // },
    {
      name: '开启数据滚动',
      code: 'showBar',
      type: 'CheckBox',
      value: false
    },
    {
      name: '默认数据起点',
      code: 'start',
      value: 0,
      type: 'InputNumber',
      max: 100,
      min: 0,
      unit: '%'
    },
    {
      name: '默认数据终点',
      code: 'end',
      value: 60,
      type: 'InputNumber',
      max: 100,
      min: 0,
      unit: '%'
    },
    {
      name: '滚动条样式设置',
      code: 'barStyle',
      children: [
        {
          name: '宽度',
          code: 'barWidth',
          value: 10,
          type: 'InputNumber',
          max: 100,
          min: 0,
        },
        {
          name: '填充颜色',
          code: 'fillerColor',
          value: 'rgba(167,183,204,0.4)',
          type: 'ColorSelector'
        },
        {
          name: '边框颜色',
          code: 'borderColor',
          value: '#ddd',
          type: 'ColorSelector'
        }
      ]
    },
  ]
};

// 提示框带选中背景色的
export const tooltipConfig = {
  code: 'tooltip',
  name: '提示框设置',
  children: [
    fontThemeBuilder({ name: '文本设置', code: 'textFont' }),
    color({
      name: '选中背景颜色',
      code: 'backColor',
      value: 'rgba(50, 50, 50, 0.4)'
    })
  ]
};

// 2.6.2提示框设置
export const tooltipSetting = {
  code: 'tooltip',
  name: '提示框设置',
  isGlobalControlled: true,
  children: [
    fontThemeBuilder(),
    color({
      name: '提示框背景颜色',
      code: 'backgroundColor',
      themePath: 'deepColorList[0]',
    }),
    radius({ value: 5, code: 'borderRadius' }),
    lineWidth({
      name: '边框粗细',
      code: 'borderWidth',
    }),
    color({
      name: '边框颜色',
      code: 'borderColor',
      themePath: 'lightColorList[4]'
    }),
    color({
      name: '选中颜色',
      code: 'backColor',
    }),
  ]
};

export function getTooltipSetting(selfDefined = []) {
  return {
    code: 'tooltip',
    name: '提示框设置',
    children: [
      fontThemeBuilder(),
      {
        name: '提示框背景颜色',
        code: 'backgroundColor',
        value: '',
        type: 'ColorSelector',
        themePath: 'deepColorList[0]',
      },
      {
        name: '圆角设置',
        code: 'borderRadius',
        value: 5,
        min: 0,
        max: 100,
        type: 'InputNumber',
        unit: 'px(像素)'
      },
      {
        name: '边框粗细',
        code: 'borderWidth',
        value: 1,
        max: 99,
        min: 0,
        type: 'InputNumber',
      },
      {
        name: '边框颜色',
        code: 'borderColor',
        value: '',
        type: 'ColorSelector',
        themePath: 'lightColorList[4]'
      },
      ...selfDefined
    ]
  };
}

// v2.6.2组件规范化新增setting
export const seriseBarStyle = {
  code: 'barStyle',
  name: '形状设置',
  isGlobalControlled: true,
  children: [
    {
      name: '柱子宽度',
      code: 'barWidth',
      value: 30,
      min: 1,
      max: 100,
      type: 'InputNumber',
      unit: 'px(像素)'
    },
    radius(),
    {
      name: '颜色设置',
      code: 'color',
      value: '',
      type: 'CustomColors',
      themePath: 'seriesColorSimilarList',
    },
    {
      name: '显示柱子背景',
      code: 'show',
      type: 'CheckBox',
      value: true
    },
    {
      name: '柱子背景颜色',
      code: 'bgColor',
      value: 'rgba(50,50,50,0.5)',
      type: 'ColorSelector'
    }
  ]
};

// 系列文本设置
export const seriseTextStyle = {
  code: 'textStyle',
  name: '文本设置',
  isGlobalControlled: true,
  children: [
    isShow(true),
    fontThemeBuilder({ name: '文本设置', code: 'textFont' }),
    {
      name: '单位',
      code: 'unit',
      type: 'Input',
      value: ''
    },
    {
      name: '位置',
      code: 'position',
      value: 'insideTop',
      type: 'Select',
      enumValue: [
        {
          key: '外部顶部',
          value: 'top'
        },
        {
          key: '内部顶部',
          value: 'insideTop'
        },
        {
          key: '内部中间',
          value: 'inside'
        },
        {
          key: '内部底部',
          value: 'insideBottom'
        }
      ]
    },
  ]
};

// 标记线设置
export const markLine = {
  code: 'markLine',
  name: '标记线设置',
  children: [
    isShow(false),
    {
      name: '标记线值',
      code: 'lineValue',
      value: 18,
      type: 'InputNumber',
    },
    fontThemeBuilder(),
    lineWidth({ value: 1 }),
    lineType({ value: 'dashed' }),
    color()
  ]
};

// 辅助线设置
export function splitLine(isXShow, isYShow, isMarkLine) {
  return {
    name: '辅助线设置',
    code: 'splitLine',
    isGlobalControlled: true,
    children: [
      {
        name: '横向辅助线',
        code: 'rowLine',
        children: [
          isShow(isXShow),
          lineWidth(),
          lineType({ value: 'dashed' }),
          color()
        ]
      },
      {
        name: '纵向辅助线',
        code: 'columnLine',
        children: [
          isShow(isYShow),
          lineWidth(),
          lineType({ value: 'dashed' }),
          color()
        ]
      },
      isMarkLine === false ? '' : markLine
    ]
  };
}

// 图例设置
export function legendConfig(show) {
  return {
    code: 'legendConfig',
    name: '图例设置',
    children: [
      isShow(show || false),
      fontThemeBuilder({ code: 'text' }),
      {
        name: '布局',
        code: 'layout',
        children: [
          {
            name: '图例布局',
            code: 'position',
            value: 'top#center',
            type: 'Select',
            enumValue: legendPositionEnum
          },
          {
            name: '左右间距',
            code: 'leftRight',
            value: 10,
            min: 0,
            type: 'InputNumber',
            unit: 'px(像素)'
          },
          {
            name: '上下间距',
            code: 'topBottom',
            value: 10,
            min: 0,
            type: 'InputNumber',
            unit: 'px(像素)'
          }
        ]
      }
    ]
  };
}

export function legendConfigRadar(show) {
  return {
    code: 'legendConfig',
    name: '图例设置',
    children: [
      isShow(show || false),
      fontThemeBuilder({ code: 'text' }),
      {
        name: '背景设置',
        code: 'backgroundStyle',
        children: [
          color({ code: 'backgroundColor', name: '背景颜色', value: 'rgba(27,100,238,0)' }),
          {
            name: '边框宽度',
            code: 'borderWidth',
            value: 0,
            type: 'InputNumber',
            max: 50,
            min: 0,
          },
          radius({ code: 'borderRadius', name: '边框圆角', value: 1 }),
          color({ code: 'borderColor', name: '边框颜色', value: 'rgba(27,100,238,0)' }),
        ]
      },
      {
        name: '图标设置',
        code: 'iconStyle',
        children: [
          {
            name: '图标类型',
            code: 'icon',
            type: 'Select',
            value: 'roundRect',
            enumValue: legendIconEnum
          },
          {
            name: '图标宽度',
            code: 'itemWidth',
            value: 25,
            type: 'InputNumber',
          },
          {
            name: '图标高度',
            code: 'itemHeight',
            value: 14,
            type: 'InputNumber',
          },
        ]
      },
      {
        name: '布局',
        code: 'layout',
        children: [
          {
            name: '图例布局',
            code: 'position',
            value: 'top#center',
            type: 'Select',
            enumValue: legendPositionEnum
          },
          {
            name: '左右间距',
            code: 'leftRight',
            value: 10,
            min: 0,
            type: 'InputNumber',
            unit: 'px(像素)'
          },
          {
            name: '上下间距',
            code: 'topBottom',
            value: 10,
            min: 0,
            type: 'InputNumber',
            unit: 'px(像素)'
          },
          {
            name: '图例间距',
            code: 'itemGap',
            value: 20,
            min: 0,
            type: 'InputNumber',
            unit: 'px(像素)'
          }
        ]
      }
    ]
  };
}

export function barWidth(number, precent) {
  return {
    name: '柱子宽度',
    code: 'columnWidth',
    value: {
      type: 'number',
      precent: precent || 30,
      number: number || 30
    },
    type: 'ChangeConfig',
    enumValue: [
      {
        key: '自适应',
        value: 'precent',
        change: [
          {
            code: 'precent',
            value: precent || 30,
            min: 1,
            type: 'InputNumber',
            unit: '百分比'
          }
        ]
      },
      {
        key: '自定义',
        value: 'number',
        change: [
          {
            code: 'number',
            value: number || 30,
            min: 1,
            type: 'InputNumber',
            unit: 'px'
          }
        ]
      }
    ]
  };
}

export const paddingConfig = {
  name: '边距设置',
  code: 'padding',
  children: [
    {
      name: '开启自定义边距',
      code: 'defined',
      type: 'CheckBox',
      value: false
    },
    {
      name: '左边距',
      code: 'left',
      type: 'InputNumber',
      value: 0,
      min: 0,
      max: 999,
      unit: 'px',
    },
    {
      name: '右边距',
      code: 'right',
      type: 'InputNumber',
      value: 0,
      min: 0,
      max: 999,
      unit: 'px',
    },
    {
      name: '上边距',
      code: 'top',
      type: 'InputNumber',
      value: 0,
      min: 0,
      max: 999,
      unit: 'px',
    },
    {
      name: '下边距',
      code: 'bottom',
      type: 'InputNumber',
      value: 0,
      min: 0,
      max: 999,
      unit: 'px',
    },
  ]
};
// 形状柱图-柱图样式
export const getGraphicBarGapSetting = {
  code: 'graphicBarGapStyle',
  name: '柱图样式',
  children: [
    {
      name: '不同系列间距',
      code: 'barGap',
      value: 80,
      type: 'InputNumber',
      unit: '%',
    },
    {
      name: '同系列柱间距',
      code: 'barCategoryGap',
      value: 130,
      type: 'InputNumber',
      unit: '%'
    },
  ]
};
// 形状柱图-系列-形状设置
export const graphicStyles = {
  code: 'graphicStyle',
  name: '形状设置',
  children: [
    {
      isGlobalControlled: true,
      name: '颜色设置',
      code: 'color',
      value: '',
      type: 'CustomColors',
      themePath: 'seriesColorSimilarList'
    },
    {
      name: '图形设置',
      code: 'symbol',
      value: {
        type: 'hill',
      },
      type: 'ChangeConfig',
      enumValue: [
        {
          key: '山形',
          value: 'hill'
        },
        {
          key: '自定义图形',
          value: 'hidden',
          change: [
            {
              name: '上传图片',
              code: 'url',
              value: `${MONET_IMGS_CONTENT_PATH}a29b05df3e2a4f48b2dc643f6693cbd3.png`,
              type: 'ImgUpdate'
            },
          ]
        }
      ]
    },
    {
      name: '图形宽',
      code: 'symbolWidth',
      type: 'InputNumber',
      value: 100,
      min: 0,
      max: 100,
      unit: '%',
    },
    {
      name: '图形高',
      code: 'symbolHeight',
      type: 'InputNumber',
      value: 100,
      min: 0,
      max: 100,
      unit: '%',
    },
  ]
};

// 标注类型
export function markPointType() {
  return {
    name: '标注类型',
    code: 'markPointType',
    value: 'max',
    type: 'Select',
    enumValue: [
      {
        key: '最大值',
        value: 'max'
      },
      {
        key: '最小值',
        value: 'min'
      },
      {
        key: '平均值',
        value: 'average'
      },
    ]
  };
}
// 标注图形
export function markPointSymbol() {
  return {
    name: '标注图形',
    code: 'symbol',
    value: 'pin',
    type: 'Select',
    enumValue: legendIconEnum,
  };
}
// 形状柱图-数据标注
export function markPoint(show) {
  return {
    code: 'markPoint',
    name: '数据标注',
    children: [
      isShow(show || false),
      markPointType(),
      markPointSymbol(),
      {
        name: '标注大小',
        code: 'symbolSize',
        type: 'InputNumber',
        value: 50,
      },
      {
        name: '标注位置-X偏移',
        code: 'symbolOffsetX',
        type: 'InputNumber',
        value: 0,
      },
      {
        name: '标注位置-Y偏移',
        code: 'symbolOffsetY',
        type: 'InputNumber',
        value: 0,
      },
      {
        name: '标注颜色',
        code: 'itemColor',
        value: '#ddd',
        type: 'ColorSelector',
        themePath: 'seriesColorSimilarList'
      },
      fontThemeBuilder({ code: 'label' }),
    ]
  };
}
// 刻度线设置
export const axisTickStyle = {
  name: '刻度线设置',
  code: 'axisTick',
  children: [
    isShow(true),
    {
      name: '刻度线长短',
      code: 'length',
      value: 8,
      min: 1,
      max: 100,
      type: 'InputNumber',
    },
    {
      name: '刻度线粗细',
      code: 'width',
      value: 1,
      min: 1,
      max: 100,
      type: 'InputNumber',
    },
    {
      name: '刻度线间距',
      code: 'interval',
      value: 0,
      min: 0,
      max: 100,
      type: 'InputNumber',
    },
    {
      name: '刻度线颜色',
      code: 'color',
      value: '#ffffff',
      type: 'ColorSelector'
    },
    lineType({ name: '刻度线样式' }),
  ]
};

// 分隔区域
export function splitAreaStyle(param) {
  const {
    code, name, value,
    min, max,
  } = param || {};
  return {
    name: '分隔区域',
    code: 'splitArea',
    children: [
      isShow(true),
      {
        name: name || '分隔区域间隔',
        code: code || 'interval',
        value: value || 0,
        min: min || 0,
        max: max || 30,
        type: 'InputNumber',
      },
      {
        name: '分隔区域颜色',
        code: 'color',
        value: '',
        type: 'CustomColors',
        themePath: 'seriesColorSimilarList[0]',
      },
      {
        name: '透明度',
        code: 'opacity',
        value: 0.1,
        min: 0,
        max: 1,
        step: 0.1,
        type: 'InputNumber',
      },
    ]
  };
}

export function visualMapSet(params) {
  return {
    code: params.code || 'visualMap',
    name: params.name || '颜色设置',
    children: [
      isShow(true),
      {
        name: '最大值',
        value: 10,
        code: 'maxValue',
        type: 'InputNumber'
      },
      {
        name: '最小值',
        value: 0,
        code: 'minValue',
        type: 'InputNumber'
      },
      {
        name: '最大值颜色',
        code: 'inRangeColorMax',
        value: '#00C9FF',
        type: 'ColorSelector'
      },
      {
        name: '最小值颜色',
        code: 'inRangeColorMin',
        value: '#0587A9',
        type: 'ColorSelector'
      }]
  };
}
